/*
 * @Date         : 2022-02-22 14:31:22
 * @LastEditors  : zu1662
 * @LastEditTime : 2022-03-03 19:37:54
 * @Description  : 登录页
 * 
 * Copyright © 2022 by zu1662, All Rights Reserved. 
 */

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Typography, Button, Icon } from '@douyinfe/semi-ui';
import FooterCom from '@/layout/components/Footer';
import GoogleIcon from '@/icons/google.svg';
import WechatIcon from '@/icons/wechat.svg';
import { UserLoginForm } from '@/types/user';
import { useStore } from '@/store';

import './index.less';

const { Text } = Typography;

export default function LoginView() {
  const [isLoading, setIsLoading] = useState(false)
  const { userStore } = useStore()
  const navigate = useNavigate()
  
  const base64Str = '';
  const handleSend = async (values: UserLoginForm) => {
    setIsLoading(true)
    const result = await userStore.login({
      username: values.username,
      password: values.password,
    })
    setIsLoading(false)
    if(result.code) {
      navigate('/', { replace: true })
    }
  };
  return (
    <div className="login-view">
      <div className="view-left"></div>
      <div className="view-right">
        <div className="login-panel">
          <h2>{process.env.PROJECT_NAME}</h2>
          <Form layout="vertical" onSubmit={handleSend} initValues={{username: 'admin', password: '123456', captcha: 73123}}>
            <div className="form-item">
              <Form.Input field="username" label="用户名" rules={[
                {required: true, message: '请输入用户名'}
              ]}></Form.Input>
            </div>
            <div className="form-item">
              <Form.Input type="password" field="password" label="密码" rules={[
                {required: true, message: '请输入密码'}
              ]}></Form.Input>
            </div>
            <div className="form-item">
              <Form.Input field="captcha" label="验证码" rules={[
                {required: true, message: '请输入验证码'},
                {type: 'number', message: '验证码类型为数字'}
              ]}></Form.Input>
              <img src={base64Str} alt="验证码" />
            </div>
            <div className="form-item">
              <Form.Checkbox value="false" field="remeber" noLabel>记住我</Form.Checkbox>
              <Text link={{}}>忘记密码？</Text>
            </div>
            <Button loading={isLoading} block theme="solid" type="primary" htmlType="submit">登录</Button>
          </Form>
          <div className="form-other">
            <Text>其他登录方式</Text>
            <Icon svg={<WechatIcon/>}></Icon>
            <Icon svg={<GoogleIcon/>}></Icon>
          </div>
        </div>
        <FooterCom classname="login-footer"></FooterCom>
      </div>
    </div>
  );
}
